<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选操作</title>
    <!--<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>-->
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           $("#all").click(function(){
               // 在使用属性处理表单元素的时候
               // jquery版本不同,处理方式不同
               // jquery1.9的版本是一个分割线
               // 1.9之前所有属性均使用attr进行实现
               // 1.9之后所有表单元素的属性需要使用prop进行实现
               // 其他属性依然使用attr
               //  console.log($(this).prop("checked"));
               $("input[type='checkbox']").prop("checked",$(this).prop("checked"));
           });
        });
    </script>
</head>
<body>
<table border="1">
    <!--
        全选操作
            当用户点击全选时,表格中所有的多选框均发生变化
            最终所有的多选框均与全选的多选框一致
            全选的多选框如果是选中状态,其他多选框均为选中状态
            全选的多选框如果是未选中状态,其他多选框均为未选中状态
    -->
    <tr>
        <th><input type="checkbox" id="all"/>全选</th>
        <th>编号</th>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input name="emp" type="checkbox"/></td>
        <td>1</td>
        <td>admin</td>
        <td>5000</td>
        <td>
            <a href="">修改</a>
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input name="emp" type="checkbox"/></td>
        <td>2</td>
        <td>alice</td>
        <td>5000</td>
        <td>
            <a href="">修改</a>
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input name="emp" type="checkbox"/></td>
        <td>3</td>
        <td>jack</td>
        <td>5000</td>
        <td>
            <a href="">修改</a>
            <a href="">删除</a>
        </td>
    </tr>
</table>
</body>
</html>